<template>
  <div>
    <h1>wath 函数</h1>
    <ul>
      <li>{{ count }}</li>
      <li>{{ name }}</li>
      <li>{{ obj }}</li>
    </ul>
    <button @click="count++">点击加一</button>
    <button @click="name = '小红'">点击变名</button>
    <button @click="obj.age = Math.random() * 100">点击变岁数</button>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导入`watch`函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
写法：watch(callback指定监听变量, callback被监听变量发生变化执行,options配置)
3. watch函数接收三个常规参数
   1. 第一个参数为函数，返回你要监听变化的响应式数据
   2. 第二个参数为响应式数据变化之后要执行的回调函数
   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
 */
import { ref, watch } from 'vue'
export default {
  setup () {
    // 1.简单类型
    const count = ref(0)
    const name = ref('小刚')
    // 开启监听
    // 写法1
    watch(() => count.value, (newVal, oldVal) => {
      console.log('count变化了:', newVal, oldVal)
    })
    // 写法2（推荐）
    watch(count, (newVal, oldVal) => {
      console.log('count变化了2：', newVal, oldVal)
    })
    // 写法3（监听多个变量）
    watch([count, name], (newVal, oldVal) => {
      console.log('变化了3：', newVal, oldVal)
    })
    // 2.复杂类型
    const obj = ref({ name: '小白', age: 21 })
    watch(obj, (newVal, oldVal) => {
      console.log('obj变化了：', newVal, oldVal)
    }, {
      deep: true, // 开启深度监听
      immediate: true // 页面加载立即执行一次监听回调函数
    })
    return { count, name, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
